<script setup>
import { CountTo } from 'vue3-count-to';
import { createReusableTemplate } from '@vueuse/core';

defineOptions({ name: 'CardData' });

const cardData = computed(() => [
  {
    key: 'visitCount',
    title: '访问量',
    value: 9725,
    unit: '',
    color: {
      start: '#ec4786',
      end: '#b955a4'
    },
    icon: 'bar-chart-outlined'
  },
  {
    key: 'turnover',
    title: '成交额',
    value: 1026,
    unit: '$',
    color: {
      start: '#865ec0',
      end: '#5144b4'
    },
    icon: 'money-collect-outlined'
  },
  {
    key: 'downloadCount',
    title: '下载量',
    value: 970925,
    unit: '',
    color: {
      start: '#56cdf3',
      end: '#719de3'
    },
    icon: 'document-download'
  },
  {
    key: 'dealCount',
    title: '成交量',
    value: 9527,
    unit: '',
    color: {
      start: '#fcbc25',
      end: '#f68057'
    },
    icon: 'trademark-circle-outlined'
  }
]);

const [DefineGradientBg, GradientBg] = createReusableTemplate();

function getGradientColor(color) {
  return `linear-gradient(to bottom right, ${color.start}, ${color.end})`;
}
</script>

<template>
  <ElCard class="card-wrapper">
    <DefineGradientBg v-slot="{ $slots, gradientColor }">
      <div class="rd-8px px-16px pb-4px pt-8px text-white" :style="{ backgroundImage: gradientColor }">
        <component :is="$slots.default" />
      </div>
    </DefineGradientBg>
    <ElRow :gutter="16">
      <ElCol v-for="item in cardData" :key="item.key" :lg="6" :md="12" :sm="24" class="my-8px">
        <GradientBg :gradient-color="getGradientColor(item.color)" class="flex-1">
          <h3 class="text-16px">{{ item.title }}</h3>
          <div class="flex justify-between pt-12px">
            <SvgIcon :icon-class="item.icon" class="text-32px" />
            <count-to
              class="text-30px text-white dark:text-dark"
              :startVal="1"
              :endVal="item.value"
              :prefix="item.unit"
              :decimals="0"
              :duration="1000"
            ></count-to>
          </div>
        </GradientBg>
      </ElCol>
    </ElRow>
  </ElCard>
</template>

<style scoped></style>
